<template>
    <div class="step3">
        <div class="pdb10 btns tr">
            <span class="selected-title list-bottom-span">支付方式</span>
            <el-select v-model="value" placeholder="请选择" @change="changeWay()" class="num-bottom-select">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                >
                </el-option>
            </el-select>
            <span class="list-bottom-span">应收</span><el-input v-model="computeReceiveable" disabled class="num-bottom-input"></el-input>
            <span class="list-bottom-span">实收</span><el-input v-model="computeReceived" @change="change" v-if="disable" disabled class="num-bottom-input"></el-input>
            <el-input v-model="computeReceived"  @input="change" v-else class="num-bottom-input"></el-input>
            <el-button class="red-btn" @click="settlement()"> 结 算 </el-button>
            <el-button class="gray-btn" @click="unpaidSettlement()"> 挂单 </el-button>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                size="tiny">
            <span>正在操作，请稍后</span>
            <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
        </span>
        </el-dialog>

        <div class="selected-result" >
            <div class="clearfix result" style=" margin: -6px -20px;padding: 6px 0;">
                <span class="selected-title">商品</span>
                <span class="change" @click="changeGood">(点击更换商品)</span>
            </div>
            <div class="card-01 result"  v-for="item in goodItem" style="margin: -2px -20px;">
                <el-row :gutter="20">
                    <el-col :span="18">
                        <div style="display: inline-block">
                            <div style="display:inline-block;vertical-align: top;margin-top: 10px;">
                                <div class="info-img" style="margin-right: 20px;margin-left: 15px">
                                    <img v-if="item.pictureName" :src="static_url + item.pictureName">
                                    <img v-else src="../../../../static/img/parkage.png">
                                </div> 
                            </div>
                            <div class="grid-content text" style="display: inline-block">
                                <h6>{{ item.name}}</h6>
                                <p class="l2">{{ item.remark ||'暂时没有详情描述～' }}</p>
                                <span>原价：{{ Number(item.price).toFixed(2) }}</span>
                                <span>会员价：<span class="member-price">{{ Number(item.memberPrize).toFixed(2)  }}</span></span>
                            </div>
                        </div>
                        
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content account">
                            <el-input-number v-model="item.quantity" :min="1"  @change="count"></el-input-number>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="selected-result"  style="margin-top: 10px">
            <div class="clearfix result" style="    margin: -6px -20px;padding: 6px 0;">
                <span class="selected-title">会员</span>
                <span class="change" @click="changeMember">(点击更换会员)</span>
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3" class="text-center"  v-if="!member.id">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img"  @click="changeMember">
                                <!--<img src="../../../../static/img/add.png">-->
                                <i class="icon-plus-circle" style="font-size: 60px;color: #999"></i>
                            </div>
                            <div class="grid-content text pt10">
                                <span>添加会员</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-center" v-if="member.id">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img">
                                <img v-if="member.portraitName" :src="static_url + member .portraitName">
                                <img v-else src="../../../../static/img/member.png">
                            </div>
                            <div>
                                <span class="l1">{{member.name}}</span>
                            </div>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </div>

        <div class="selected-result"  style="margin-top: 10px">
            <div class="clearfix result" style="   margin: -6px -20px; padding: 6px 0;">
                <span class="selected-title">员工</span>
                <span class="change" @click="changeEmployee">(点击更换员工)</span>
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3" class="text-center" v-if="employee.length==0">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img" @click="changeEmployee">
                                <!--<img src="../../../../static/img/add.png">-->
                                <i class="icon-plus-circle" style="font-size: 60px;color: #999"></i>
                            </div>
                            <div class="grid-content text pt10">
                                <span>添加员工</span>
                            </div>
                        </div>

                    </el-col>
                    <el-col :span="3" class="text-center" v-for="emp in employee">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img">
                                <img v-if="emp.portraitName" :src="static_url + emp.portraitName">
                                <img v-else src="../../../../static/img/member.png">
                            </div>
                            <div class="grid-content text pt10" style="width: 90px">
                            <span v-if="(emp.ujname).length > 6">
                              {{emp.ujname.slice(0, 6) + "..."}}
                            </span>
                                <span v-else>
                              {{emp.ujname}}
                            </span>
                            </div>
                        </div>

                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import vMember from './Member.vue';
    export default {
        props: {
            goodItem: '',
            employee: '',
            member: '',
            item:''
        },
        name: "keepailvelist",
        data: function () {
            return {
                items: [],
                num: 1,
                options: [
                    {
                        value: '20',
                        label: '现金',
                    },
                    {
                        value: '10',
                        label: '扣卡',
                        disabled: true
                    },
                    {
                        value: '40',
                        label: '代金券',
                        disabled: true
                    },
                    {
                        value: '30',
                        label: '积分',
                        disabled: true
                    },
                    {
                        value: '60',
                        label: '微信'
                    },
                    {
                        value: '70',
                        label: '支付宝'
                    },
                    {
                        value: '80',
                        label: '银行卡 '
                    }
                ],
                value: '20',
                received: 0.00,
                memberId: '',
                receivable: 0.00,
                static_url: this.$cfg.static_url + "/",
                djqPrice: 0,
                goodsQuantity: '',
                disable : false,
                dialogVisible: false,
                changeFlag:'',
                computeReceive:''

            }
        },
        computed:{
            computeReceiveable(){
                this.receivable =Number(this.receivable);
                this.receivable =0;
                this.goodItem.forEach(item => {
                    console.log(item.quantity)
                    console.log(parseFloat(item.price));
                    this.receivable += Number(parseFloat(item.price) * item.quantity);
                    console.log(this.receivable)
                });
                this.receivable = Number(this.receivable).toFixed(2)
                //应收价格
                console.log("应收价格==========>" + this.receivable);
                this.changeFlag=Math.random();
                return this.receivable
            },
            computeReceived(){
                this.computeReceive ='';
                let a = this.changeFlag;
                console.log(3)
                if (this.member) {
                    console.log("==============会员计算实收价格");
                    console.log(this.value);
                    this.received =Number(this.received);
                    this.received =0;
                    if(this.value == 10){   //扣卡
                        this.goodItem.forEach(item => {
                            if(item.memberPrize!=0){
                                this.received += Number(parseFloat(item.memberPrize) * item.quantity);
                            }else{
                                this.received += Number(parseFloat(item.price) * item.quantity);
                            }
                        });
                    }
                    else if (this.value == 20 || this.value == 60 || this.value == 70 || this.value == 80) {  //现金
                        this.goodItem.forEach(item => {
                            this.received += Number(parseFloat(item.price) * item.quantity);
                        });
                        console.log(this.received)
                    }
                    else if (this.value == 30) {   //积分
                        console.log(this.goodItem.score)
                        this.received = 0;
                    }else if (this.value == 40) {
                        console.log(this.djqPrice)
                        if(this.djqPrice == 0){
                            this.goodItem.forEach(item => {
                                this.received += Number(parseFloat(item.price) * item.quantity);
                            });
                        }else {
                            this.goodItem.forEach(item => {
                                this.received += Number(parseFloat(this.djqPrice) * parseFloat(item.price) * item.quantity);
                            });
                        }
                    }
                    this.received = this.received.toFixed(2)
                    return this.received
                }
//                 非会员计算实收价格
                else {
                    console.log("================>非会员计算实收价格")
                    this.goodItem.forEach(item => {
                        this.received += Number(parseFloat(item.price) * item.quantity);
                    });
                    this.received = Number(this.received).toFixed(2)
                    return this.received
                }

            }
        },
        watch: {
            value(){
                if(this.value == 10 || this.value == 40 || this.value == 30){
                    this.disable = true;
                }
                else {
                    this.disable = false;
                }
            },
            item(){
                console.log(this.item)
//              this.goodItem.name = val.entries[0].goodsName
            },
            djqPrice(){
                console.log("==================>djqPrice")
                if(this.djqPrice == 0){
                    this.options[2].disabled = true;
                }else {
                    this.options[2].disabled = false;
                }
            },
            goodsQuantity(){
                console.log("==================>djqPrice")
                if(this.goodsQuantity == 0){
                    this.options[1].disabled = true;
                    this.value = "20";
                }else {
                    this.options[1].disabled = false;
                    this.value = "10";
                }
            },
            goodItem(){

                console.log("==================>goodItem")
                console.log(this.goodItem);
                this.goodItem.forEach(item => {
                    if(!item.score){
                        console.log("==================>商品未设置积分单价")
                        this.options[3].disabled = true;
                        return
                    }else {
                        if(this.member){
                            this.options[3].disabled = false;
                        }
                    }
                    if(!item.quantity){
                        item.quantity=1
                    }else{
                        item.quantity =item.quantity
                    }
                });

                this.changeMemberPrice();

            },

            member(){
                // this.count();
                console.log(this.goodsQuantity)
                console.log("=============>member")
                console.log()
                if (this.member) {      //会员
                    console.log("=============>选择会员");
                    this.value = '10';
                    this.options[1].disabled = false;
                    this.options[2].disabled = false;
                    this.options[3].disabled = false;

                    if(!this.goodItem.score){
                        console.log("==================>商品未设置积分单价")
                        this.options[3].disabled = true;
                    }
                    console.log(this.goodsQuantity)
                    if(this.goodsQuantity == 0){
                        console.log("6666666666666666666666666666666")
                        this.options[1].disabled = true;
                        this.value = "20";
                    }else {
                        console.log("99999999999999999999999999")
                        this.value = "10";
                    }
                }
                else {           //非会员
                    console.log("=============>没选择会员")
                    this.options[1].disabled = true;
                    this.options[2].disabled = true;
                    this.options[3].disabled = true;
                    this.value = '20';
                }
                this.changeMemberPrice();
            }

        },

        methods: {
            change(val){
//                alert(val)
                this.computeReceive=val;
                console.log(this.computeReceive)
            },
            changeWay(){
                console.log("===================>changeWay");
                this.changeMemberPrice();
            },
            changeMemberPrice(){
                console.log("========================>改变会员价格");
                this.goodItem.forEach(item => {
                    if(this.member){
                        let self = this;
                        this.$axioxs.get("/goods_paid/?userId=" + this.member.id + "&goodsId=" + item.id)
                            .then(function (res) {
                                console.log(res.data.records);
                                if(res.data.records.length == 0){
                                    self.goodsQuantity = 0;
                                    item.memberPrize = item.price;
                                    self.options[1].disabled = true;
                                }else {
                                    self.goodsQuantity = res.data.records[0].quantity;
                                    console.log(self.goodsQuantity)
                                    item.memberPrize = res.data.records[0].memberPrize;
                                    if(self.goodsQuantity == 0){       //会员剩余积分数量为0,积分方式禁用
                                        console.log("===============>商品剩余为0")
                                        self.options[1].disabled = true;
                                    }else {
                                        self.options[1].disabled = false;
                                    }
                                }
                                self.getDjqLeft();

                            })
                            .catch(function (error) {
                                console.log(error);
                                self.loading = true;
                            });
                    }else {
                            item.memberPrize = 0;
                        this.options[1].disabled = true;
                        this.count();
                    }
                });


            },
            getDjqLeft(){
                // 计算该会员代金券的剩余量
                if(this.member){
                    console.log("==========计算该会员代金券的剩余量");
                    let self = this;
                    this.$axioxs.get("/goods_paid/?userId=" + this.member.id + "&goodsId=3224b5f9-d073-40a9-8fbe-276b408c794e")
                        .then(function (res) {
                            console.log(res.data.records);
                            if(res.data.records.length != 0){    //
                                let djqQuantity = res.data.records[0].quantity;
                                let djqAmount = res.data.records[0].amount;
                                console.log(djqAmount)
                                console.log(djqQuantity)
                                if(djqQuantity == 0){
                                    self.djqPrice = 0;    //否则显示原价
                                    self.options[2].disabled = true;
                                }
                                else {        //如果该会员有剩余次数，则显示代金券的会员价格
                                    console.log("================>代金券的会员价格")
                                    self.djqPrice = djqAmount / djqQuantity;   //每张代金券的价钱
                                    self.options[2].disabled = false;
                                    console.log(self.djqPrice)
                                }
                            }else {
                                self.options[2].disabled = true;
                            }



                            self.getJfLeft();

                        })
                        .catch(function (error) {
                            console.log(error);
                            self.loading = true;
                        });
                }
            },
            getJfLeft(){
                // 计算该会员积分的单价
                if(this.member){
                    console.log("==========计算该会员剩余积分");
                    let self = this;
                    this.$axioxs.get("/goods_paid/?userId=" + this.member.id + "&goodsId=a7093a53-11d3-404c-bf3b-80ef7db398b5")
                        .then(function (res) {
                            console.log(res.data.records);
                            console.log(self.goodItem.score)
                            if(res.data.records.length != 0){   //会员有剩余积分
                                let jfQuantity = res.data.records[0].quantity;
                                console.log("========jfQuantity"+ jfQuantity)
                                if(jfQuantity == 0){       //会员剩余积分数量为0,积分方式禁用
                                    console.log("===============>积分剩余为0")
                                    self.options[3].disabled = true;
                                }else {
                                    self.options[3].disabled = false;
                                }
                            }else {      //会员无剩余积分,积分方式禁用
                                self.options[3].disabled = true;
                            }

                            self.count();

                        })
                        .catch(function (error) {
                            console.log(error);
                            self.loading = true;
                        });
                }
            },
            count(num){
                console.log("========================>count");
                this.receivable =Number(this.receivable);
                this.receivable =0;
                this.goodItem.forEach(item => {
                    console.log(item.quantity)
                    console.log(parseFloat(item.price));
                    this.receivable += Number(parseFloat(item.price) * item.quantity);
                    console.log(this.receivable)
                });
                this.receivable = Number(this.receivable).toFixed(2)
                //应收价格
                console.log("应收价格==========>" + this.receivable);

            },
            changeGood(){
                this.$emit('changeGood', this.goodItem);
            },
            changeMember(){
                this.$emit('changeMember', this.member);
            },
            changeEmployee(){
                this.$emit('changeEmployee', this.employee);
            },
            settlement(state){

                console.log(state);
                if(!state){
                    state = "1";
                }
                console.log(state);
                console.log(this.employee)
                console.log("=================")
                console.log(this.computeReceiveable)
                console.log(this.computeReceived)
                var empArr = [];
                if (this.employee) {
                    this.employee.forEach(item => {
                        console.log(item);
                        var emp = {};
                        emp.jobId = item.roleId;
                        emp.handlerId = item.userId;
                        empArr.push(emp)
                    });
                }

                console.log(empArr)

                if (this.member) {
                    this.memberId = this.member.id;
                } else {
                    this.memberId = ''
                }
                var entryList =this.goodItem;

                if(state=="0"){
                    var args = {
                        "memberId": this.memberId,
                        "received": this.computeReceive||this.computeReceived,
                        "state": state,
                        "receivable": this.computeReceiveable,
                        "payment": this.value,
                        "remark":'挂单中'
                    }
                }else{
                    var args = {
                        "memberId": this.memberId,
                        "received": this.computeReceive||this.computeReceived,
                        "state": state,
                        "receivable": this.computeReceiveable,
                        "payment": this.value,
                        "remark":'完成'
                    }
                }
                var arr=[];
                for(var i=0;i<entryList.length;i++){
                    var objGood={};
                    objGood.goods={};
                    objGood.goods.id=entryList[i].id;
                    objGood.quantity =entryList[i].quantity;
                    objGood.payment =this.value;
                    objGood.price =entryList[i].price;
                    objGood.amount =entryList[i].quantity *entryList[i].price;
                    objGood.handlers =empArr;
                    arr.push(objGood)
                }
                args.entries = arr;
                this.dialogVisible = true;
                console.log(args)

                let self = this;
                this.$axioxs.post("/sale/", args)
                    .then(function () {
                            if(state=="0"){
                                self.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '挂单成功'
                                });
                            }else{
                                self.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '结算成功'
                                });
                            }
                            self.$router.push("/cashierBill");
                            self.dialogVisible = false;
                            console.log("==============>success")
                        },
                        (res) => {
                            console.log(res)
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })

            },

            unpaidSettlement(){
                let state = "0";
                this.settlement(state);
            },
        }
    }
</script>

<style scoped>
    .btns .red-btn{
        margin-left: 15px;
    }
    .step3 .btns{
        width: 65%;
        right:0;
    }
    .el-select .el-input {
        width: 150px !important;
    }

    .el-form-item {
        margin-top: 10px;
    }
    .payment .el-input{
        width: 150px !important;
    }
    .img{
        overflow: hidden;
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }
    .img img{
        border-radius: 50%;
    }

    .line .step-item .step-description{
        left: -15px;
        padding-top: 10px;
    }

    .step-header{
        padding-left: 60px;
    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
    }
    .list-bottom-span{
        color: #fff;
    }
    .num-bottom-input{
        width: 14%;
    }
    .num-bottom-select{
        width: 14%;
    }
    .info-img{
        width: 75px;
        height: 75px;
        margin: 5px auto;
        display: inline-block;
    }
    .info-img img{
        width: 75px;
        height: 75px;
    }
    .selected-result .result{
        background: #fff;
    }
    .selected-result .result .el-input__inner:hover {
        border: 1px solid #cacaca;
    }
</style>
